<template>
  <div class="issues-main" v-loading="loading">
    <!-- 面包屑 -->
    <header class="issues-header">
      <DetailHeader></DetailHeader>
    </header>
    <el-scrollbar class="issues-body" v-if="issuesData">
      <DetailContent
        :issuesData="issuesData"
        :findUserLike="findUserLike"
        :countLikeNum="countLikeNum"
        :getUserInfo="getUserInfo"
        @send-click-like="handleLike"
        @refresh="refresh"
      ></DetailContent>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'

import { IProblems, IlikeData } from '@/views/problemCenter/config/problems'
import { ElMessage } from 'element-plus'
// import { getIssuesList } from '@/apis/issues/issues-lists'
// import { newLikeData, editLikeData } from '@/apis/issues/issues-like'

import DetailHeader from './components/DetailHeader.vue'
import DetailContent from './components/DetailContent.vue'
import { editProblemsLike, getProblemsList, newProblemsLike } from '@/apis/system/problems'

const $router = useRouter()
const pageId = ref<number>(+$router.currentRoute.value.query.id!)

/**
 *
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('user') as string) || ''
})

/**
 * 获取单条问题内容
 */
const countLikeNum = ref<IlikeData[]>()
const loading = ref(false)
const issuesData = ref<IProblems>()
const findUserLike = ref<IlikeData>()
const getData = () => {
  loading.value = true
  let params = reactive({
    id: pageId.value
  })
  getProblemsList(params)
    .then((res) => {
      if (!res.rows) return
      issuesData.value = res.rows[0]
      findUserLike.value = issuesData.value?.issue_like?.find((item: IlikeData) => {
        return item.uid === getUserInfo.value.id
      })
      countLikeNum.value = issuesData.value?.issue_like?.filter((item) => {
        return item.is_status === 1
      })
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
    .finally(() => {
      loading.value = false
    })
}

getData()

/**
 * 新增点赞
 */
const createNewLike = (issueId: number) => {
  let params = {
    uid: getUserInfo.value.id,
    issue_id: issueId,
    is_status: 1
  }
  newProblemsLike(params)
    .then((res) => {
      if (!res) return
      ElMessage.success('点赞成功！')
      getData()
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

/**
 * 修改点赞
 */
const editLike = (item: IlikeData) => {
  editProblemsLike(item)
    .then((res) => {
      if (!res) return
      countLikeNum.value = issuesData.value?.issue_like.filter((item) => {
        return item.is_status === 1
      })
      switch (item.is_status) {
        case 1:
          ElMessage.success('点赞成功！')
          break
        case 0:
          ElMessage.error('已取消点赞！')
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

/**
 * 点赞
 */
const handleLike = (issueId: number) => {
  // 若没有，新增点赞表/否则，修改status
  if (!!findUserLike.value) {
    findUserLike.value.is_status = findUserLike.value.is_status === 0 ? 1 : 0
    editLike(findUserLike.value)
  } else {
    createNewLike(issueId)
  }
}

/**
 * @desc: 刷新
 * @return {*}
 */
const refresh = () => {
  getData()
}
</script>

<style lang="less" scoped>
@color: #fdf6ec;

.issues-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 10px;

  .issues-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  .issues-body {
    padding: 12px;
    flex-grow: 1;
    height: 0;
    flex-shrink: 0;
    overflow-y: auto;
  }
}
</style>
